import React,{Component} from 'react';
import { 
    View, 
    ScrollView,
    StyleSheet,
    FlatList, 
    Image, 
    Text,
    Alert,
    TouchableWithoutFeedback, 
    StatusBar,
} from 'react-native';
import Header from './header/Header';
import Dialog from './dialog/index'
export default class ChooseAddress extends Component {

    constructor(props) {
        super(props);
        this.state = {
            lists: [
                {
                    id: 1,
                    name: '林帅帅',
                    mobile: '13016202445',
                    addressId: 400120,
                    address: '河北省邯郸市邯山区某某某某街道某某某某村某某某某座',
                    isDefault: true,
                },
                {
                    id: 2,
                    name: '李帅帅',
                    mobile: '18085216458',
                    addressId: 400110,
                    address: '广东省深圳市南山区某某某某街道某某某某村某某某某座',
                    isDefault: false,
                },
                {
                    id: 3,
                    name: '陈帅帅',
                    mobile: '17785624526',
                    addressId: 400100,
                    address: '海南省琼海市嘉积镇某某某某街道某某某某村某某某某座',
                    isDefault: false,
                },
                
            ],
        };
        this.renderAddressItem = this.renderAddressItem.bind(this);
    }

    hasChoose(id, name, mobile, address, addressId){
    	const { params } = this.props.navigation.state;
        const {navigate,goBack,state} = this.props.navigation;
        state.params.callback(
        	{
        		id: id,
        		addressId: addressId,
        		name: name,
        		mobile: mobile,
        		address: address,
        	}
        );
        goBack();
    }


    // 鞋匠资讯
    renderAddressItem() {
        // 数组
        let itemAry = [];
        // 遍历
        let _this = this;
        for (let i = 0; i<_this.state.lists.length; i++) {
            itemAry.push(
                <View style={{backgroundColor: '#fff'}} key={i}>
                    <TouchableWithoutFeedback onPress={()=>this.hasChoose(_this.state.lists[i].id, _this.state.lists[i].name, _this.state.lists[i].mobile, _this.state.lists[i].address, _this.state.lists[i].addressId)}>
                        <View style={{flexDirection: 'row', height: 64, paddingLeft: 12, paddingRight: 12, paddingTop: 10, paddingBottom: 10,borderBottomWidth: 1, borderColor: '#e9e9e9'}}>
                            <View style={{flex: 1, justifyContent: 'space-between'}}>
                                <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
                                    <Text style={{fontSize: 14, color: '#262626'}}>{_this.state.lists[i].name}</Text>
                                    <Text style={{fontSize: 14, color: '#262626'}}>{_this.state.lists[i].mobile}</Text>
                                </View>
                                <Text style={{fontSize: 14, color: '#262626'}} numberOfLines={1}>{_this.state.lists[i].address}</Text>
                            </View>
                        </View>
                    </TouchableWithoutFeedback>
                </View>
            )
        }
        return itemAry;
    }

    render() {
        const { params } = this.props.navigation.state;
        const {navigate,goBack,state} = this.props.navigation;
        let barHeight = StatusBar.currentHeight;
        return (
            <View style={{
                flex: 1,
                // paddingTop: barHeight, 
                backgroundColor: '#eaeaea'
            }}>
                <Header isShowBack={true} title='收货地址' goBack={goBack} />

                <View style={{flex: 1, paddingBottom: 44}}>
                    <ScrollView>
                        {this.renderAddressItem()}
                    </ScrollView>
                </View>
                <TouchableWithoutFeedback onPress={()=>navigate('AddNewAddress')}>
                    <View style={{position: 'absolute', left: 0, right: 0, bottom: 0, height: 44, justifyContent: 'center', alignItems: 'center', backgroundColor: '#006ce9'}}>
                        <Text style={{fontSize: 14, color: '#fff'}}>新增收货地址</Text>
                    </View>
                </TouchableWithoutFeedback>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    nav: {
        height: 44, 
        backgroundColor: '#fff', 
        paddingLeft: 15, 
        paddingRight: 15, 
        paddingTop: 6, 
        paddingBottom: 6,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    }
});